<script setup>
const props=defineProps(['cardData'])
import { Plus } from '@element-plus/icons-vue'
import { ref ,onMounted ,watch} from 'vue'
import officeRequestService from '@/api/organization/officeRequestService';
const Data=ref(props.cardData)
watch(() => props.cardData, (newValue, oldValue) => {
    // 在 cardData 对象发生变化时执行的操作
    Data.value=newValue
});
//聚焦input输入框
const onFocus=()=>{
}
//光标离开输入框
const onBlur=()=>{
    //修改稿件命名
    console.log(Data.value.name)
    officeRequestService.save(Data.value).then(()=>{})
}
</script>
<template>
    <div class="card" v-if="cardData">
        <div style="height: 80%;font-size: 15px;">
            <div style="padding: 7% 5% 0 8%;">
                {{ Data.content.length > 75 ? Data.content.substring(0, 75) + '...' : Data.content  }}
            </div>
        </div>
        <div style="height: 20%;display: flex;align-items: center ;gap: 5%;color:slategrey;">
            <div style="margin-left: 5%;">
                <input 
                type="text" 
                v-model="Data.name"
                @focus="onFocus"   
                @blur="onBlur" 
                @click.stop=""
                >
            </div>
            <div>
                {{ Data.updateTime }}
            </div>
        </div>
    </div>
    <div class="card" v-else >
        <div style="height: 100%;display: flex;justify-content: center;align-items: center;">
            <el-icon class="avatar-uploader-icon"><Plus style="width: 100%;height: 100%;"/></el-icon>
        </div>
    </div>
</template>
<style scoped>
.card{
    --draft-width: 200px;
    width: 200px;
    height: 200px;
    box-shadow: 0 0 4px 2px rgb(0, 0, 0,0.1) ;
}
.avatar-uploader-icon{
    width: 50px;
    height: 50px;
}
input{
    border: none;
    outline: none;
    width: 70px;
    height: 15px;
    transition: 0.5s;
    border-radius: 3px;
}
input:focus{
    box-shadow:0 0 4px 1px rgb(0, 0, 0,0.1);
}
</style>